<template>
  <div class="sign_box1" :style="{ height: boxHeight }">
    <div class="sign_content">
      <vueEsign
        ref="esignRef"
        :width="signBox.signWidth"
        :height="signBox.signHeight"
        v-model:bg-color="signBox.bgColor"
        style="border: 1px solid #eee"
        v-if="isDraw"
      ></vueEsign>
    </div>
    <div class="sign_btns">
      <div class="btns">
        <div class="btn_base btn_base_reset" @click="back">
          <span>取消</span>
        </div>
        <div class="btn_base btn_base_reset" @click="handleReset">
          <span>重置</span>
        </div>
        <div class="btn_base btn_base_reset" @click="handleGenerate">
          <span>保存</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import vueEsign from "vue-esign";
import { base64ToRoate } from "@/utils/base64ToRoate";
import { useRouter } from "vue-router";

const router = useRouter();

const esignRef = ref();
const boxRef = ref();
const boxHeight = ref(0);

const isDraw = ref(false);

const imgSrc = ref();
const signBox = reactive({
  signWidth: 0,
  signHeight: 0,
  bgColor: "rgba(0,0,0,0)"
});

const handleReset = () => {
  esignRef.value.reset();
};

const handleGenerate = () => {
  esignRef.value
    .generate()
    .then(res => {
      imgSrc.value = res;
      // 将图片逆时针旋转90
      base64ToRoate(res).then(res => {
        console.log(res);
      });
    })
    .catch(err => {
      console.log("aa");
    });
};

const back = () => {
  router.go(-1);
};
onMounted(() => {
  boxHeight.value = document.documentElement.clientHeight + "px";
  const scHeight = document.documentElement.clientHeight;
  const scWidth = document.documentElement.clientWidth;
  signBox.signWidth = scWidth;
  signBox.signHeight = 200;
  isDraw.value = true;
  //   window.addEventListener("orientationchange", function (event) {
  //     console.log(window.orientation);
  //     if (window.orientation === 90 || window.orientation === -90) {
  //       event.preventDefault();
  //     }
  //   });
});
</script>

<style lang="scss" scoped>
.sign_box1 {
  display: flex;
  flex-direction: column;
}

.sign_content {
  padding: 10px;
}
</style>
